<template>
  <div>
    <vueDanmaku
      :autoplay="false"
      ref="danmaku"
      randomChannel
      :speeds="80"
      :danmus="danmus"
      style="height: 350px; background: #000"
      @play-end="onplayend"
    >
    </vueDanmaku>
    <div style="display: flex;">
      <el-input
        v-model="myMsg"
        placeholder="输入您想说的话"
        clearable
        @keyup.enter.native="sendMsg"
      ></el-input>
      <el-button type="primary" @click="sendMsg" style="margin-left: 10px;">发送弹幕</el-button>
    </div>
  </div>
</template>

<script>
import vueDanmaku from "vue-danmaku";
import { DMessageClient } from "@/util/msgjs/DMessageClient.js";
export default {
  components: {
    vueDanmaku,
  },
  data() {
    return {
      myMsg: "",
    };
  },
  props: {
    isShow: Boolean,
    danmus: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    sendMsg() {
      if (this.myMsg && this.myMsg.trim()) {
        this.$emit("enterMsg", this.myMsg.trim());
        this.myMsg = "";
      } else {
        this.$antdMessage.warning("请输入弹幕内容！");
      }
    },
    onplayend(params) {
      this.danmus.length = 0;
      console.log("play-end", params);
      // debugger
    },
  },
  mounted() {
    this.$refs.danmaku.play();
  },
};
</script>
<style scoped>
</style>